import React from 'react';
import { ListButton } from '@nova-hf/ui';
import { useTranslation } from 'beta/utils/i18n';
import { useRouter } from 'next/router';
import { useServiceQuery } from 'typings/graphql';

type ContractServiceProps = {
  serviceId: string | null | undefined;
};

const ContractService = ({ serviceId }: ContractServiceProps) => {
  const { t } = useTranslation('containers');
  const { data } = useServiceQuery({
    variables: {
      serviceId: serviceId ?? '',
    },
    skip: !serviceId,
  });

  const router = useRouter();
  const user = data?.service?.user?.id;

  if (serviceId && user) {
    return (
      <ListButton
        icon="plus"
        text={t('contractPeriodsContainer.lookAt')}
        onClick={() => {
          router.push(`/beta/${user}/thjonustur/${serviceId}`);
        }}
      />
    );
  }

  return null;
};

export default ContractService;